<script setup lang="ts" name="history">
import { _history } from '@/api/api'
import { useRequest } from 'alova'
import { reactive, onMounted } from 'vue'
import { useLoadingBar,useNotification  } from 'naive-ui'
import { useAppStore } from '@/store'
import { TimerOutline,CalendarOutline,TrashOutline } from '@vicons/ionicons5'
import { goto,time_format } from '@/utils/comm'
import { onBeforeRouteLeave } from 'vue-router'


const notification = useNotification()
const store = useAppStore()
const thems =  reactive({
  menu_left:  store.thems?.menu_left?true:false,
});
const loadingBar = useLoadingBar()
const open_detail= (item:any)=> {
  item.path = "/home/detail"
  goto(item)
}

const msg= (message:any)=> {
    notification['success']({
      content: message,
      duration: 1000,
      keepAliveOnHover: true
    })
}

const data =  reactive({
  pge:1,
  cnt:10,
  loading: false,
  list:[] as any,
  cachePage: [] as any,
  num_his:4
});

const createDropdownOptions = (options: Array<{ name: string; cover: string }>) =>
options.map((option) => ({
  key: option.name,
  label: option.name,
  name: option.name,
  cover: option.cover,
}))

async function on_refresh(){
  loadingBar.start()
  get_list()
}

async function get_list() {
  const { onSuccess }  = useRequest(_history.getList({
    pge: data.pge,
    cnt: data.cnt,
  }))
  onSuccess((res:any) => {
    data.list = res.data.list 
    setTimeout(() => {
    loadingBar.finish()
  }, 200)
  });  
}

async function delete_his(id:any) {
  const { onSuccess }  = useRequest(_history.delList({
    id: id,
  }))
  onSuccess((res:any) => {
    msg(res.data.message)
    get_list()
  });
}
 

onBeforeRouteLeave((to, from, next) => {
  if (to.name === 'detail'&&from==from) {
    data.cachePage.list = ['history']  
  } else {
    data.cachePage.list = []
  } 
  store.setcachePage(data.cachePage)
  next()
})


const getwindow_size = async() => {
  if(window.innerWidth<400){
    data.num_his = 2
  }
}

onMounted(() => {
  getwindow_size()
  on_refresh()
}); 
</script>

<template>
  
  <div class="page_list  page_up"  :style="thems.menu_left?'height:calc(100vh - 150px);':''">
    <div class="title">
        <div>
          <n-tag round :bordered="false" size="large">历史观看记录
          <template #avatar><n-avatar :style="{backgroundColor:store.thems?.primary}"><n-icon><TimerOutline /></n-icon></n-avatar></template>
        </n-tag>
        </div>
    </div>

    <n-scrollbar style="max-height: calc(100vh - 100px);padding: 15px;" trigger="none">
      <n-collapse :default-expanded-names="[0,1]" >
        <n-collapse-item  :name="index" v-for="item_date,index in data.list">
          <n-carousel show-arrow :show-dots="false" :loop="false" dot-placement="bottom"  draggable :slides-per-view="data.num_his" :space-between="20" >
            <n-carousel-item class="item" v-for="item in item_date.list" >
            <div class="card xiaoshou animated fadeIn " :style="'background-image:url('+item.cover+');'" v-if="item.show_type==2">
              <div class="card_box card_hover"    @click="open_detail(item)">
                <n-image lazy class="img" :src="item.cover" object-fit="cover" preview-disabled/>
                <div class="name">{{item.name}}</div>
              </div>
              <div class="last_time" :style="{backgroundColor:store.thems?.primary}">继续{{item.other}}</div>
              <div class="delete" >
                <n-popconfirm @positive-click="delete_his(item.his_id)"  positive-text="确定" negative-text="算了">
                    <template #trigger>
                       <n-icon><TrashOutline /></n-icon> 
                    </template>
                    需要删除{{item.name}}吗？
                </n-popconfirm>
              </div>
            </div>
            <div class="card xiaoshou animated fadeIn" v-else>
                <img lazy class="card_img" :src="item.cover" style="object-fit:cover" preview-disabled    @click="open_detail(item)"/>
                <div class="name2">{{item.name}}</div>
                <div class="last_time" :style="{backgroundColor:store.thems?.primary}">继续{{time_format(item.other)}}</div>
                <div class="delete" >
                  <n-popconfirm @positive-click="delete_his(item.his_id)"  positive-text="确定" negative-text="算了">
                    <template #trigger>
                       <n-icon><TrashOutline /></n-icon> 
                    </template>
                    需要删除{{item.name}}吗？
                </n-popconfirm>
                </div>
            </div>
        </n-carousel-item>
          </n-carousel>
          <template #header>
            <n-icon size="22" style="margin-right: 5px;"><CalendarOutline /></n-icon>{{item_date.date}}
          </template>
          <template #header-extra>
            <n-avatar-group :options="item_date.list" :size="30" :max="8">
              <template #avatar="{ option: { name, cover } }">
                <n-tooltip>
                  <template #trigger>
                    <n-avatar :src="cover" />
                  </template>
                  {{ name }}
                </n-tooltip>
              </template>
              <template #rest="{ options: restOptions, rest }">
                <n-dropdown :options="createDropdownOptions(restOptions)" placement="top">
                  <n-avatar>+{{ rest }}</n-avatar>
                </n-dropdown>
              </template>
            </n-avatar-group>
          </template>
        </n-collapse-item>

      </n-collapse>

 
  </n-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
  .page_list{
    height: calc(100vh - 52px);
    .title{
      display: flex;
      justify-content: space-between;
      padding:10px 10px 0 10px;
      font-size: 18px;
    }
    .card {
      width: 100%;
      aspect-ratio: 1/0.6;
      object-fit: cover;
      border-radius: 5px;
      background-size: 100% auto;
      overflow: hidden;
      .name2{
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        background: linear-gradient(to bottom,rgb(0, 0, 0,0.5), rgb(0, 0, 0,0.8));
        height:30px;
        line-height:30px;
        overflow: hidden;
      }
      .last_time{
        position: absolute;
        top: 5px;
        right: 5px;
        text-align: center;
        overflow: hidden;
        border-radius: 5px;
        opacity: 0.8;
        color: #fff;
        width: 70px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
      }
      .delete{
        position: absolute;
        right: 5px;
        bottom: 5px;
        text-align: center;
        overflow: hidden;
        border-radius: 2px;
        opacity: 0.8;
        color: #fff;
        width: 20px;
        height: 20px;
        line-height: 23px;
        font-size: 12px;
        background-color: var(--light-hover-deep2);
      }
      .card_img{
        width: 100%;height: 100%;border-radius: 5px;
        transition: all 0.4s;
        &:hover{
          transform: scale(1.1,1.1); 
        }
      }
    }
    .card_hover{
      &:hover{
          .img{
            transform: scale(1.02,1.02); 
          }
        }
    }
    .card_box{
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom,rgb(0, 0, 0,0.5), rgb(0, 0, 0,1));
      padding: 5px;
      display: flex;
      .img{
        height: 100%;aspect-ratio: 0.75/1;border-radius: 5px;
        transition: all 0.4s;
      }
      .name{
        color: #fff;width: auto;margin-left: 5px;font-size: 14px;display: flex;align-items: end;
      }
    }
    .item_title{
         width: 100%;
         height: 30px;
         line-height: 30px;
         overflow: hidden;
         text-align: center;
    }
  }
  :deep(.n-carousel__arrow) {
    background:transparent !important;
    border-radius: 4px;
    &:hover{
      background-color: var(--hover1) !important;
    }
  } 


  .light-mode { 
  .page_list{
 
      .delete{
        background-color: rgb(0,0,0,0.5);
      }
      .name2{
        background: linear-gradient(to bottom,rgb(255, 255, 255,0.5), rgb(255, 255, 255,0.8));
      }
      .card_box{
        background: linear-gradient(to bottom,rgb(255, 255, 255,0.5), rgb(255, 255, 255,0.8));
        .name{
          color: #000;
        }
      }
      .card_box2{
        background-color: rgb(255,255,255,0);
        .name{
          color: #000;
        }
      }
 
    :deep(.n-carousel__arrow) {
      color: #000;
      &:hover{
        background-color: #cbc7c7 !important;
      }
    } 
  }
}  
</style>